<template>
    <div class="bigD-center-cont">
        <i class="bigD-cont-lt"></i>
        <i class="bigD-cont-rt"></i>
        <i class="bigD-cont-lb"></i>
        <i class="bigD-cont-rb"></i>
        <span class="bigD-cont-title">驾培机构增长</span>
        <div class="bigD-cont-ccltj">
            <IEcharts :option="bar"></IEcharts>
        </div>
    </div>
</template>

<script>
import IEcharts from "vue-echarts-v3";
export default {
  name: "institutionalGrowth",
  components: { IEcharts },
  data() {
    return {
      bar: {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          left: "right",
          data: ["2017", "2018"],
          textStyle: {
            color: "#fefeff"
          }
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "1%",
          bottom: "3%",
          containLabel: true
        },
        barWidth: "30%",
        xAxis: [
          {
            type: "category",
            data : ['东河','青山','昆区','九原','高新','固阳','土右','达茂','白云'],
            axisTick: { //刻度线
                show: false,
            },
            axisLabel: {
                color: "#fefeff",
            },
            axisLine: {
                lineStyle: {
                color: "#545d6f",
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                width: "10",
                color: "#162741",
                opacity: "0.8"
                }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisTick: { //刻度线
                show: false,
            },
            axisLabel: {
                color: "#fefeff",
                margin: 15
            },
            axisLine: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                width: "1",
                color: "#162741",
                opacity: "0.8"
                }
            }
          }
        ],
        series: [
          {
            name: "2017",
            type: "bar",
            data:[10, 17, 16, 11,10, 3, 6, 1, 1],
            itemStyle: {
                color: "#2196f3"
            },
          },
          {
            name: "2018",
            type: "bar",
            data:[10, 17, 16, 13,10, 3, 6, 1, 1],
            itemStyle: {
                color: "#0dbc5f"
            },
          }
        ]
      }
    };
  }
};
</script>

<style scoped>
.bigD-center-cont{
  height: 220px;
}
.bigD-cont-ccltj{
    height: 190px;
}
</style>

